<template>
	<div>
		<div class="register">
			<div>
				用户注册
			</div>
			<div class="textDiv">
				<van-form @submit="submit">
					<van-cell-group>
						<van-field class="text" name="userName" v-model="userName" required  label="用户名"
							placeholder="用户名由6-11位数字组成" :rules="[{ pattern: u_pattern, message: '用户名由6-11位数字组成' }]" />
						<van-field class="text" name="email" v-model="email" required label="邮箱" placeholder="请输入邮箱"
							:rules="[{ pattern: e_pattern, message: '请填写正确的邮箱' }]" />
						<van-field class="text" name="password" v-model="password" required label="密码"
							placeholder="请输入密码" :rules="[{ pattern: p_pattern, message: '密码长度只少6个' }]" />
						<div class="btn1">
							<van-button square block type="info" class="submit" native-type="submit">注册</van-button>
						</div>
					</van-cell-group>
				</van-form>
			</div>

			<div class="other">
				<span @click="login">已有账号，立即登录</span>
			</div>
			<div class="copy">
				<p>&copy;猫眼电影 客服电话 ：<span @click="service">400-670-5335</span></p>
			</div>
		</div>
	</div>
</template>



<script>
	//输入框
	import Vue from 'vue';
	import {
		Form,
		Field,
		CellGroup,
		Toast,
		Button
	} from "vant";

	Vue.use(Button);
	Vue.use(Field);
	Vue.use(CellGroup);
	Vue.use(Toast);
	Vue.use(Form);


	export default {
		data() {
			return {
				userName: '',
				email: '',
				password: '',
				againpw: '',
				u_pattern: /^\d{6,11}$/,
				e_pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
				p_pattern: /[\s\S]{6,}/,
			}
		},
		methods: {
			//注册按钮
			submit(values) {
				console.log(values)
				//发送请求，
				this.$http.post('http://10.36.133.3:3000/api/v1/user/register',values).then(data=>{
					//判断
					if(data.err != 0){
						//注册失败
						Toast.fail(data.msg);
					}else{
						Toast.success(data.msg);
						setTimeout(()=>{
							this.$router.push('/center/login');
						},1500)
					}
				})
				
			},
			login() {
				this.$router.push('/center/login')
			},
			service() {
			},
		}

	}
</script>

<style scoped>
.register {
	margin-top: 30px;
}
	.textDiv {
     box-sizing: border-box;
     padding: 0 20px;
}
 .text {
     margin: 32px 0;
     font-size: 16px;
}
 .btn1 {
     margin: 10px 20px;
     display: flex;
     justify-content: center;
     margin-top: 30px;
}
 .submit {
     height: 32px;
     color: white;
     background-color: #df2d2d;
     border: none;
     border-radius: 5.2px;
}
 .other {
     margin-left: 20px;
     display: flex;
     justify-content: space-between;
     color: #FE8C00;
     margin-top: 10px;
     font-size: 12px;
}
 .copy {
     text-align: center;
}
 .copy span {
     color: red;
}
 
</style>
